<template>
  <div class="bg-white rounded-lg shadow-lg p-6">
    <h2 class="text-2xl font-semibold text-gray-800 mb-6">{{ title }}</h2>
    
    <!-- 主视频播放器 -->
    <div v-if="props.mainVideos.length > 0" class="mb-8">
      <h3 class="text-xl font-semibold text-gray-800 mb-4">{{ currentMainVideo.title }}</h3>
      <div class="video-container mb-4">
        <video 
          id="main-player-container" 
          class="w-full rounded-lg shadow-md" 
          style="height: 540px;" 
          controls
          preload="auto" 
          playsinline 
          webkit-playsinline 
          x5-playsinline
          :key="currentMainVideo.id"
        >
          <source :src="currentMainVideo.url" type="video/mp4">
          您的浏览器不支持视频播放。请尝试使用现代浏览器如Chrome、Firefox或Safari。
        </video>
        <p class="text-sm text-gray-500 mt-2 text-center">{{ currentMainVideo.description }}</p>
      </div>
      
      <!-- 主视频切换按钮 -->
      <div v-if="props.mainVideos.length > 1" class="flex flex-wrap gap-2 mb-6">
        <button
          v-for="(video, index) in props.mainVideos"
          :key="video.id"
          @click="switchMainVideo(index)"
          :class="[
            'px-4 py-2 rounded-md text-sm font-medium transition-colors',
            currentMainVideoIndex === index
              ? 'bg-blue-500 text-white'
              : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
          ]"
        >
          {{ video.title }}
        </button>
      </div>
    </div>

    <!-- 视频列表 -->
    <div v-if="props.videoList.length > 0" class="mt-8">
      <h3 class="text-xl font-semibold text-gray-800 mb-4">相关视频推荐</h3>
      <div class="space-y-4">
        <div v-for="video in props.videoList" :key="video.id" 
             class="flex items-center border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
             @click="playVideo(video)">
          <div class="w-32 h-20 bg-gray-200 rounded-lg mr-4 flex items-center justify-center flex-shrink-0">
            <svg class="w-8 h-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
            </svg>
          </div>
          <div class="flex-1">
            <h4 class="font-medium text-gray-800 mb-1">{{ video.title }}</h4>
            <p class="text-gray-600 text-sm mb-2">{{ video.description }}</p>
            <div class="flex items-center space-x-4 text-xs text-gray-500">
              <span v-if="video.duration">{{ video.duration }}</span>
              <span v-if="video.views">{{ video.views }} 次观看</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, inject } from 'vue'
import { useStudyTracker } from '@/composables/useStudyTracker'

// 获取学习追踪功能
const { trackVideoWatch } = useStudyTracker()

// 定义组件props
const props = defineProps({
  // 主视频配置
  mainVideos: {
    type: Array,
    default: () => [
      {
        id: 'main1',
        title: '前端技术的十八年风雨',
        url: 'https://1304796331.vod-qcloud.com/c881d227vodcq1304796331/547e45075145403691651426767/hwdN5D5yvHAA.mp4',
        description: '前端技术的十八年风雨'
      },
      {
        id: 'main2',
        title: '前端技发展史',
        url: 'https://vjs.zencdn.net/v/oceans.mp4',
        description: '前端技术发展历程详解'
      }
    ]
  },
  // 视频列表
  videoList: {
    type: Array,
    default: () => [
      {
        id: 1,
        title: 'HTML5新特性详解',
        description: '深入了解HTML5的新特性和应用场景',
        duration: '15:30',
        views: '1.2k',
        url: 'https://example.com/video1.mp4'
      },
      {
        id: 2,
        title: 'CSS3动画与过渡',
        description: '学习CSS3动画和过渡效果的实现方法',
        duration: '22:45',
        views: '856',
        url: 'https://example.com/video2.mp4'
      },
      {
        id: 3,
        title: 'JavaScript ES6+特性',
        description: 'ES6及以上版本的新特性介绍',
        duration: '28:12',
        views: '2.1k',
        url: 'https://example.com/video3.mp4'
      },
      {
        id: 4,
        title: 'Vue.js框架入门',
        description: 'Vue.js框架的基础概念和使用方法',
        duration: '35:20',
        views: '3.5k',
        url: 'https://example.com/video4.mp4'
      },
      {
        id: 5,
        title: '响应式设计原理',
        description: '移动端适配和响应式设计的实现',
        duration: '18:55',
        views: '1.8k',
        url: 'https://example.com/video5.mp4'
      },
      {
        id: 6,
        title: '前端工程化实践',
        description: '现代前端开发工具链和工程化实践',
        duration: '42:30',
        views: '2.7k',
        url: 'https://example.com/video6.mp4'
      }
    ]
  },
  // 组件标题
  title: {
    type: String,
    default: '学习视频'
  }
})

// 当前播放的主视频索引
const currentMainVideoIndex = ref(0)

// 计算当前主视频
const currentMainVideo = computed(() => {
  return props.mainVideos[currentMainVideoIndex.value] || props.mainVideos[0]
})

// 切换主视频
const switchMainVideo = (index) => {
  currentMainVideoIndex.value = index
  // 记录视频切换行为
  const video = props.mainVideos[index]
  if (video) {
    trackVideoWatch(video.title, video.id)
  }
}

// 播放视频方法
const playVideo = (video) => {
  // 切换主视频播放器的源
  const mainPlayer = document.getElementById('main-player-container')
  if (mainPlayer && video.url) {
    const source = mainPlayer.querySelector('source')
    if (source) {
      source.src = video.url
      mainPlayer.load()
      mainPlayer.play().catch(err => {
        console.error('视频播放失败:', err)
      })
    }
  }
  
  // 记录视频播放行为
  trackVideoWatch(video.title, video.id?.toString())
}

// 设置视频播放追踪
const setupVideoTracking = () => {
  setTimeout(() => {
    const mainPlayer = document.getElementById('main-player-container')
    if (mainPlayer) {
      let hasTrackedPlay = false
      
      // 监听播放事件
      mainPlayer.addEventListener('play', () => {
        if (!hasTrackedPlay) {
          const currentVideo = currentMainVideo.value
          trackVideoWatch(currentVideo.title, currentVideo.id)
          hasTrackedPlay = true
        }
      })
      
      // 监听时间更新，当播放超过30秒时记录
      mainPlayer.addEventListener('timeupdate', () => {
        if (!hasTrackedPlay && mainPlayer.currentTime > 30) {
          const currentVideo = currentMainVideo.value
          trackVideoWatch(currentVideo.title, currentVideo.id)
          hasTrackedPlay = true
        }
      })
      
      // 当视频源改变时重置追踪状态
      mainPlayer.addEventListener('loadstart', () => {
        hasTrackedPlay = false
      })
    }
  }, 1000)
}

// 组件挂载后设置视频追踪
onMounted(() => {
  setupVideoTracking()
})
</script>